<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title>修德抄经堂</title>
	<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> -->
	<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.css">
	<link rel="stylesheet" type="text/css" href="../css/benxin.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link rel="stylesheet" type="text/css" href="../css/full.css">
	<link rel="stylesheet" type="text/css" href="../css/cehua.css">
	<script src="../bower_components/mui/dist/js/mui.js"></script>
	<script src="../bower_components/jquery/dist/jquery.js"></script>

	<!--<script src="../js/resLoader.js"></script> -->
	<!--<script src="../js/index.js"></script> -->
</head>
<body onorientationchange="updateOrientation();">
<!-- 提示浮层 -->
    <div id="mcover1">
        <div>
            <div id="xian">
                <p>经书将从我的收藏中删除！</p>
                <button id="cancel">取消</button>
                <button id="yes">确认</button>
            </div>
        </div>
    </div>
    <!-- 侧滑导航根容器 -->
    <div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
      <!-- 菜单容器 -->
      	<aside class="mui-off-canvas-left" id="offCanvasSide" style="visibility: visible;">
			<div class="mui-scroll-wrapper" style="overflow: visible;">
				<div id="cehua" class="mui-scroll">
                <ul>
                    <a href="boruo.html">
                        <li style="margin-top: 0;">
                            <img src="../img/banruo.png" class="cover">
                            <p class="same color">般若</p>
                        </li>
                    </a>
                    <a href="jingjin.html">
                        <li>
                            <img src="../img/jingjin.png" class="cover">
                            <p class="same color">精进</p>
                        </li>
                    </a>
                    <a href="bushi.html">
                        <li>
                            <img src="../img/shiyuan.png" class="cover">
                            <p class="same color">施愿</p>
                        </li>
                    </a>
                    <a href="benxin.html">
                        <li>
                            <img src="../img/benxin.png" class="cover">
                            <p class="same color">本心</p>
                        </li>
                    </a>
                </ul>

					 <!-- <img id="erduo" src="../img/shuxie/tishi.png">  -->
					<div id="erduo"></div>
				</div>
				</div>
		</aside>
      <!-- 主页面容器 -->
      <div class="mui-inner-wrap">
        <div id="offCanvasContentScroll" class="mui-scroll-wrapper">
          <div class="mui-scroll">
            <div class="page">
					<bg class="bg" style="pointer-events: none;"><img src="../img/bkcb.png"></bg>
					<div class="content">
					    <!--<a href="./search.html">-->
					    	<!--<div class="sousuo">-->
						    	<!--<span><img src="../img/bore/search.png" class="cover"></span>-->
						    	<!--<span>输入经书名称或关键字</span>-->
						    <!--</div>-->
					    <!--</a>-->
					    <div class="main">
					    	<div class="left">
					    		<p class="same">本<br/>心</p>
					    		<img src="../img/benxin.png">
					    	</div>
					    	<div class="right">
					    		<div class="fayuanwen">
					    			<p class="p_t color same">修行果位</p>
					    			<ul id="process">

					    			</ul>
					    		</div>

					    		<div class="dizhi">
					    			<p class="p_t color same">我的地址<img src="../img/btin.png"></p>
					    			<ul id="fanren">
					    				<a href="benxin_address.html" id="defaultAddress">
											<!--<li class="sel">-->
												<!--<p class="p_name fang">-->
													<!--<span style="float: left;">张三</span>-->
													<!--<span>18296191996</span>-->
												<!--</p>-->
												<!--<p class="p_dizhi fang">北京朝阳区三街13号</p>-->
												<!--<img src="../img/benxin/delete_hui.png">-->
											<!--</li>-->
										</a>
					    			</ul>
                                    <a href="add_address.html?returnUrl=benxin.html">
                                        <div id="add_address" class="same color">添加新地址
                                            <img style="width: 16px;" src="../img/benxin/add_huang.png">
                                        </div>
                                    </a>
					    		</div>
					    	</div>
					    </div>
					</div>
					<!--
		            	滚动区域
		            -->
				    <div id="scroll" style="height: 121px;">
				    	<img class="tishi" src="../img/benxin/next.png">
			    		<div style="height: 125px;" class="tab_div mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
			    		    <div class="mui-scroll" style="height: 125px;" id="collection">
			    		        <!-- <span class="mui-control-item mui-active">
			    		            <img src="../img/bore/book.png">
			    		        </span>
			    		        <span class="mui-control-item">
			    		            <img class="shuming" src="../img/bore/book.png">
			    		        </span>
			    		        <span class="mui-control-item">
			    		           <img class="shuming" src="../img/bore/book.png">
			    		         </span>
			    		        <span class="mui-control-item">
			    		           <img class="shuming" src="../img/bore/book.png">
			    		         </span>
			    		        <span class="mui-control-item">
			    		           <img class="shuming" src="../img/bore/book.png">
			    		         </span>
			    		        <span class="mui-control-item">
			    		           <img class="shuming" src="../img/bore/book.png">
			    		        </span> -->
			    		    </div>
			    		</div>
			    	</div>


				</div>
            </div>

        </div>
      </div>
    </div>
    <ul class="btn">
        <a href="javascript:;" id="read">
            <li>
                <img src="../img/benxin/read.png">
                <p>阅读</p>
            </li>
        </a>

        <a href="javascript:;" id="write">
            <li>
                <img src="../img/benxin/write.png">
                <p>抄写</p>
            </li>
        </a>

        <li id="cancleCollection" style="z-index: 10000;">
            <img src="../img/benxin/collection.png">
            <p>收藏</p>
        </li>
    </ul>
</body>
<script src="../js/common.js"></script>
<script>
$(document).ready(function(){
    mui.init();
    mui('body').on('tap','.tab li',function(){

        $(this).addClass('sel').siblings().removeClass('sel');
        var i = $(this).index();
        $("#scroll .tab_div").css("display","none");
        $("#scroll .tab_div").eq(i).css("display","block");
    });

    mui('body').on('tap','a',function(){document.location.href=this.href;});
});
</script>
<script>
$(document).ready(function(){
    function getCookie(name) {
        var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
        if (arr != null) return unescape(arr[2]);
        return null;
    }

	$(function () {
        var versionId=null;
	    $.ajax({
			url: '/fe/user/info',
			success:function (data) {
                var address = data.data.address;
                var data = data.data.progress;

				$('#process').append(`<li class="color fang"><img src="../img/benxin/level1.png"><span>在线时间</span><span style="margin-left: 10px;">${data.online_time.num}小时</span><span style="float: right;">超越${data.online_time.rank}用户</span></li>
					    				<li class="color fang"><img src="../img/benxin/level2.png"><span>抄写字数</span><span style="margin-left: 10px;">${data.copy_chars.num}字</span><span style="float: right;">超越${data.copy_chars.rank}用户</span></li>
					    				<li class="color fang"><img src="../img/benxin/level3.png"><span>抄完本数</span><span style="margin-left: 10px;">${data.copy_books.num}本</span><span style="float: right;">超越${data.copy_books.rank}用户</span></li>
					    				<li class="color fang"><img src="../img/benxin/level4.png"><span>印刷本数</span><span style="margin-left: 10px;">${data.print_books.num}本</span><span style="float: right;">超越${data.print_books.rank}用户</span></li>
					    				<li class="color fang"><img src="../img/benxin/level5.png"><span>助抄页数</span><span style="margin-left: 10px;">${data.assist_copy_pages.num}页</span><span style="float: right;">超越${data.assist_copy_pages.rank}用户</span></li>`);
				$('#defaultAddress').append(`<li class="sel">
												<p class="p_name fang">
													<span style="float: left;">${address.contact}</span>
													<span>${address.phone}</span>
												</p>
												<p class="p_dizhi fang">${address.address}</p>
												<img src="../img/benxin/delete_hui.png">
											</li>`)
            }
		});
	    //收藏列表
	    $.ajax({
			url: '/fe/user/starred/sutra_edition',
			data: {
                "limit": 200,
                "offset": 0,
			},
            async: false,
			success: function (data) {
			    var data = data.data;
                console.log(data)
			    for(var i=data.length-1;i>-1;i--){
                    s = '<span class="mui-control-item" data-id="'+ data[i].id +'"><img src="'+ data[i].cover_url+'"></span>'
                    $('#collection').append(s)
				};
			    collection = $('#collection').find('.mui-control-item').eq(0)
                collection.addClass('mui-active');
                versionId = collection.data('id');
            }
		});


        $('.mui-control-item').each(function (index) {
            $(this).on('tap', function(i){
                versionId = $(this).data('id');
            });
        });

            var id = $('#collection').find('.mui-active').data('id');
        $('.btn').on('tap','#read',function () {
            var html = 'read.html?id='+versionId;
            if ($('#collection').find('.mui-control-item').length!=0){
                $("#read").attr("href",html);
            }

        })
        $('.btn').on('tap','#write',function () {
            if ($('#collection').find('.mui-control-item').length!=0) {
                $("#write").attr("href", "jingjin_chaoxie.html");

            }
        })

            var write = $('#write');
            var read = $('#read');

            // $('.btn').on('tap','#write',function () {
            //     location.href = 'caoxuexuanze.html?id='+versionId+'';
            // });
            // $('.btn').on('tap','#read',function () {
            //     alert(versionId);
            //     location.href = 'read.html?id='+versionId+'';
            // })

            write.click(function () {
                if ($('#collection').find('.mui-control-item').length!=0) {
                location.href = 'caoxuexuanze.html?id='+versionId+'';
                localStorage.setItem('versionId',versionId);}
            });
            read.click(function () {
                if ($('#collection').find('.mui-control-item').length!=0) {
                location.href = 'read.html?id='+versionId+'';}
            });


        // $('.btn').on('tap','#read',function () {
        //     var html = 'read.html?id='+versionId;
        //     $("#read").attr("href",html);
        // })
        // $('.btn').on('tap','#write',function () {
        //     $("#read").attr("href","read.html?id=11");
        // })
        $('.btn').on('click','#cancleCollection',function () {
            if ($('#collection').find('.mui-control-item').length!=0) {
                $("#mcover1").css("display", "block");
            };
        })
        if ($('#collection').find('.mui-control-item').length==0) {
            $('#cancleCollection img').css('-webkit-filter', 'grayscale(100%)');
        }
        $("#cancel").click(function () {
            $("#mcover1").css("display","none")
        })
		$('#yes').click(function () {
            //var id = $('#collection').find('.mui-active').data('id');
            var csrftoken = getCookie('csrftoken');
            api = '/fe/user/starred/sutra_edition/' + versionId;
            $.ajax({
                url: api,
                type: 'DELETE',
                beforeSend: function(xhr, settings) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                },
                success: function (data) {
                    console.log(data);
                    if(data.status == 200){
                        $("#mcover1").css("display","block");
                        location.reload();
                    }
                },
                error: function (error) {
                    console.log(error);
                }
            })
        })


		
        $('.main .right').width($('.main').width()-$('.main .left').width());

//        $('.dizhi ul li').each(function(){
//            if($(this).hasClass("sel")){
//                $(this).find('img').attr("src","../img/benxin/delete.png");
//            }
//        })
//        $('.dizhi ul li').click(function(){
//
//            $('.dizhi ul li').removeClass("sel");
//            $('.dizhi ul li').find("img").attr("src","../img/benxin/delete_hui.png")
//            $(this).addClass("sel");
//            $(this).find('img').attr("src","../img/benxin/delete.png");
//        })


    })

});
</script>


<script>
	// mui.init();
	// // mui('body').on('tap','a',function(){document.location.href=this.href;});
	// mui('#fanren').on('tap','li',function(){
	// 	$(this).addClass("sel").siblings().removeClass("sel")
	// });

	// function updateOrientation(){

	// }

 //    mui('.mui-scroll-wrapper').scroll({
 //        scrollY: true, //是否竖向滚动
 //        scrollX: false, //是否横向滚动
 //        startX: 0, //初始化时滚动至x
 //        startY: 0, //初始化时滚动至y
 //        indicators: true, //是否显示滚动条
 //        deceleration: 0.0006, //阻尼系数,系数越小滑动越灵敏
 //        bounce: true //是否启用回弹
 //    });


 //    mui('body').on('tap','a',function(){document.location.href=this.href;});
</script>
</html>
